<template>
	<div>
		<div class="container">
			<div class="handle-box">
				<el-card>
					<div>
						<el-input v-model="query.orderNo" placeholder="快递单号" class="handle-input mr10"></el-input>
						<el-select v-model="query.status" placeholder="快递状态" class="handle-select mr10" style="width: 200px" clearable>
							<el-option :key="0" label="待揽件" :value="0"></el-option>
							<el-option :key="1" label="已揽件" :value="1"></el-option>
							<el-option :key="2" label="运输中" :value="2"></el-option>
							<el-option :key="3" label="已到达" :value="3"></el-option>
							<el-option :key="4" label="派送中" :value="4"></el-option>
							<el-option :key="5" label="已完成" :value="5"></el-option>
							<el-option :key="6" label="已取消" :value="6"></el-option>
						</el-select>
						<el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
						<el-button type="warning" @click="handleBatchOperate(4, '一键接收')" v-if="currentUserRole == 1 && batchDeliveryTag" :disabled="buttonDisable">一键接收</el-button>
						<el-button type="warning" @click="handleBatchOperate(2, '一键发件')" v-if="currentUserRole == 2" :disabled="buttonDisable">一键发件</el-button>
						<el-button type="warning" @click="handleBatchOperate(3, '一键收件')" v-if="currentUserRole == 2" :disabled="buttonDisable">一键收件</el-button>
					</div>
				</el-card>
			</div>
			<el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
				<el-table-column prop="orderNo" label="快递单号" align="center" :min-width="150"></el-table-column>
				<el-table-column prop="senderName" label="发件人"></el-table-column>
				<el-table-column prop="senderProvince" label="发件人地址" :min-width="200" :show-overflow-tooltip="true">
					<template #default="scope">
							{{scope.row.senderProvince}}{{scope.row.senderCity}}{{scope.row.senderTown}}{{scope.row.senderDetail}}
					</template>
				</el-table-column>
				<el-table-column prop="receiverName" label="收件人"></el-table-column>
				<el-table-column prop="receivedProvince" label="收件人地址" :min-width="200" :show-overflow-tooltip="true">
					<template #default="scope">
						{{scope.row.receiverProvince}}{{scope.row.receiverCity}}{{scope.row.receiverTown}}{{scope.row.receiverDetail}}
					</template>
				</el-table-column>
				<el-table-column prop="amount" label="金额(￥)" width="80"></el-table-column>
				<el-table-column prop="weight" label="重量(KG)" width="85">
				</el-table-column>
				<el-table-column prop="payment" label="支付方式" align="center" :min-width="100">
					<template #default="scope">
						<el-tag v-if="scope.row.payment == 0">寄付</el-tag>
						<el-tag v-if="scope.row.payment == 1" type="success">到付</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="backTag" label="退回件？" align="center" :min-width="100">
					<template #default="scope">
						<el-tag v-if="scope.row.backTag == 1" type="danger">退回件</el-tag>
						<el-tag v-if="scope.row.backTag == 0" type="primary">正常件</el-tag>
					</template>
				</el-table-column>

				<el-table-column prop="status" label="状态" align="center" min-width="100">
					<template #default="scope">
						<el-tag v-if="scope.row.status == 0" type="warning">待揽件</el-tag>
						<el-tag v-if="scope.row.status == 1" type="warning">已揽件</el-tag>
						<el-tag v-if="scope.row.status == 2" type="primary">运输中</el-tag>
						<el-tag v-if="scope.row.status == 3">已到达</el-tag>
						<el-tag v-if="scope.row.status == 4" type="info">派送中</el-tag>
						<el-tag v-if="scope.row.status == 5" type="success">已完成</el-tag>
						<el-tag v-if="scope.row.status == 6" type="danger">已取消</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" align="center" :min-width="160" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="操作" min-width="190" align="center" fixed="right">
					<template #default="scope">
						<el-button text type="primary" @click="handleDetail(scope.$index, scope.row)" size="small">
							详情
						</el-button>
						<!--系统管理员和网点管理员才能编辑订单-->
						<el-button text type="warning" @click="handleEdit(scope.$index, scope.row)" size="small" v-if="scope.row.backTag == 0 && scope.row.status != 5 && scope.row.status != 6 && currentUserRole == 3">
							编辑
						</el-button>
						<el-button text type="warning" @click="handleEdit(scope.$index, scope.row)" size="small" v-if="scope.row.backTag == 0 && currentUserRole == 2 && (scope.row.startOutlet == currentOutlet && scope.row.status == 0 || scope.row.endOutlet == currentOutlet && scope.row.status == 3)">
							编辑
						</el-button>
						<!--快递员且快件为待揽件状态才能揽件-->
						<el-button text type="success" @click="handleTake(scope.row)" size="small" v-if="currentUserRole == 1 && currentUserId == scope.row.startCourier && scope.row.status == 0">
							揽件
						</el-button>
						<!--网点管理员且快件为已揽件状态才能揽件-->
						<el-button text type="success" @click="handleSend(scope.row)" size="small" v-if="currentUserRole == 2 && scope.row.backTag == 0 && currentOutlet == scope.row.startOutlet && scope.row.status == 1">
							发件
						</el-button>
						<!--网点管理员且快件为已揽件状态才能揽件（退回件）-->
						<el-button text type="success" @click="handleSend(scope.row)" size="small" v-if="currentUserRole == 2 && scope.row.backTag == 1 && currentOutlet == scope.row.endOutlet && scope.row.status == 1">
							发件
						</el-button>
						<!--网点管理员且快件为运输中状态才能收件-->
						<el-button text type="success" @click="handleReceive(scope.row)" size="small" v-if="currentUserRole == 2 && scope.row.backTag == 0 && currentOutlet == scope.row.endOutlet && scope.row.status == 2">
							收件
						</el-button>
						<!--网点管理员且快件为运输中状态才能收件（退回件）-->
						<el-button text type="success" @click="handleReceive(scope.row)" size="small" v-if="currentUserRole == 2 && scope.row.backTag == 1 && currentOutlet == scope.row.startOutlet && scope.row.status == 2">
							收件
						</el-button>
						<!--快递员且快件为已到达状态才能接收-->
						<el-button text type="success" @click="handleDelivery(scope.row)" size="small" v-if="currentUserRole == 1 && scope.row.backTag == 0 && currentUserId == scope.row.endCourier && scope.row.status == 3">
							接收
						</el-button>
						<!--快递员且快件为已到达状态才能接收（退回件）-->
						<el-button text type="success" @click="handleDelivery(scope.row)" size="small" v-if="currentUserRole == 1 && scope.row.backTag == 1 && currentUserId == scope.row.startCourier && scope.row.status == 3">
							接收
						</el-button>
						<!--用户且快件为派送中状态才能确认-->
						<el-button text type="success" @click="confirmReceive(scope.row)" size="small" v-if="currentUserRole == 0 && scope.row.backTag == 0 && scope.row.receiverPhone == currentPhone && scope.row.status == 4">
							确认
						</el-button>
						<!--用户且快件为派送中状态才能确认（退回件）-->
						<el-button text type="success" @click="confirmReceive(scope.row)" size="small" v-if="currentUserRole == 0 && scope.row.senderId == currentUserId && scope.row.backTag == 1 && scope.row.status == 4">
							确认
						</el-button>
						<!--用户且快件为派送中状态才能拒收-->
						<el-button text type="danger" @click="refuseReceive(scope.row)" size="small" v-if="currentUserRole == 0 && scope.row.backTag == 0 && scope.row.receiverPhone == currentPhone && scope.row.status == 4 && scope.row.backTag == 0">
							拒收
						</el-button>
						<!--用户类型且快件为待揽件状态才能取消订单-->
						<el-button text class="red" @click="handleCancel(scope.row)" size="small" v-if="currentUserRole == 0 && scope.row.backTag == 0 && currentUserId == scope.row.senderId && scope.row.status == 0">
							取消
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination
					background
					layout="total, prev, pager, next"
					:current-page="query.pageNUm"
					:page-size="query.pageSize"
					:total="query.total"
					@current-change="handlePageChange"
				></el-pagination>
			</div>
		</div>

		<!--详情弹出框-->
		<el-dialog v-model="detailDialog" title="快递详情" @closed="clearDetail" width="80%">
			<el-descriptions
					class="margin-top"
					title="基本信息"
					:column="3"
					border>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							快递单号
						</div>
					</template>
					{{orderDetail.data.orderNo}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							状态
						</div>
					</template>
					<el-tag v-if="orderDetail.data.status == 0" type="warning">待揽件</el-tag>
					<el-tag v-if="orderDetail.data.status == 1" type="warning">已揽件</el-tag>
					<el-tag v-if="orderDetail.data.status == 2" type="primary">运输中</el-tag>
					<el-tag v-if="orderDetail.data.status == 3">已到达</el-tag>
					<el-tag v-if="orderDetail.data.status == 4" type="info">派送中</el-tag>
					<el-tag v-if="orderDetail.data.status == 5" type="success">已完成</el-tag>
					<el-tag v-if="orderDetail.data.status == 6" type="danger">已取消</el-tag>
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							重量(KG)
						</div>
					</template>
					{{orderDetail.data.weight}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							金额(￥)
						</div>
					</template>
					{{orderDetail.data.amount}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							备注信息
						</div>
					</template>
					{{orderDetail.data.remark}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							创建时间
						</div>
					</template>
					{{orderDetail.data.createTime}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							完成时间
						</div>
					</template>
					{{orderDetail.data.finishTime}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							关闭时间
						</div>
					</template>
					{{orderDetail.data.closeTime}}
				</el-descriptions-item>
			</el-descriptions>

			<el-descriptions
					style="padding-top: 10px"
					class="margin-top"
					title="寄件人信息"
					:column="3"
					border>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							姓名
						</div>
					</template>
					{{orderDetail.data.senderName}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							联系方式
						</div>
					</template>
					{{orderDetail.data.senderPhone}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							省份
						</div>
					</template>
					{{orderDetail.data.senderProvince}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							城市
						</div>
					</template>
					{{orderDetail.data.senderCity}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							县区
						</div>
					</template>
					{{orderDetail.data.senderTown}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							详细地址
						</div>
					</template>
					{{orderDetail.data.senderDetail}}
				</el-descriptions-item>
			</el-descriptions>

			<el-descriptions
					style="padding-top: 10px"
					class="margin-top"
					title="收件人信息"
					:column="3"
					border>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							姓名
						</div>
					</template>
					{{orderDetail.data.receiverName}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							联系方式
						</div>
					</template>
					{{orderDetail.data.receiverPhone}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							省份
						</div>
					</template>
					{{orderDetail.data.receiverProvince}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							城市
						</div>
					</template>
					{{orderDetail.data.receiverCity}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							县区
						</div>
					</template>
					{{orderDetail.data.receiverTown}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							详细地址
						</div>
					</template>
					{{orderDetail.data.receiverDetail}}
				</el-descriptions-item>
			</el-descriptions>
			<div style="margin-top: 10px; margin-bottom: 10px" v-if="!orderDetail.startOutlet.name">
				<span style="color: var(--el-text-color-primary); font-size: 16px; font-weight: 700;">揽件信息</span>
				<el-empty description="暂无揽件信息" style="height: 100px" image-size="50"></el-empty>
			</div>
			<el-descriptions
					style="padding-top: 10px"
					class="margin-top"
					title="揽件信息"
					:column="3"
					border
					v-if="orderDetail.startOutlet.name">
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							名称
						</div>
					</template>
					{{orderDetail.startOutlet.name}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							联系方式
						</div>
					</template>
					{{orderDetail.startOutlet.phone}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							省份
						</div>
					</template>
					{{orderDetail.startOutlet.province}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							城市
						</div>
					</template>
					{{orderDetail.startOutlet.city}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							县区
						</div>
					</template>
					{{orderDetail.startOutlet.town}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							详细地址
						</div>
					</template>
					{{orderDetail.startOutlet.detailAddress}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							揽件快递员
						</div>
					</template>
					{{orderDetail.startCourier.name}}
				</el-descriptions-item>
				<el-descriptions-item :span="2">
					<template #label>
						<div class="cell-item">
							揽件快递员联系方式
						</div>
					</template>
					{{orderDetail.startCourier.phone}}
				</el-descriptions-item>
			</el-descriptions>
			<div style="margin-top: 10px; margin-bottom: 10px" v-if="!orderDetail.endOutlet.name">
				<span style="color: var(--el-text-color-primary); font-size: 16px; font-weight: 700;">派件信息</span>
				<el-empty description="暂无派件信息" style="height: 100px" image-size="50"></el-empty>
			</div>
			<el-descriptions
					style="padding-top: 10px"
					class="margin-top"
					title="派件信息"
					:column="3"
					border
					v-if="orderDetail.endOutlet.name">
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							名称
						</div>
					</template>
					{{orderDetail.endOutlet.name}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							联系方式
						</div>
					</template>
					{{orderDetail.endOutlet.phone}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							省份
						</div>
					</template>
					{{orderDetail.endOutlet.province}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							城市
						</div>
					</template>
					{{orderDetail.endOutlet.city}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							县区
						</div>
					</template>
					{{orderDetail.endOutlet.town}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							详细地址
						</div>
					</template>
					{{orderDetail.endOutlet.detailAddress}}
				</el-descriptions-item>
				<el-descriptions-item>
					<template #label>
						<div class="cell-item">
							派件快递员
						</div>
					</template>
					{{orderDetail.endCourier.name}}
				</el-descriptions-item>
				<el-descriptions-item :span="2">
					<template #label>
						<div class="cell-item">
							派件快递员联系方式
						</div>
					</template>
					{{orderDetail.endCourier.phone}}
				</el-descriptions-item>
			</el-descriptions>
		</el-dialog>

		<!-- 变更快递员弹出框 -->
		<el-dialog title="变更快递员" v-model="editCourierDialog" width="40%">
			<el-form label-width="70px" label-position="top">
				<el-form-item label="快递单号">
					<el-input v-model="form.orderNo" disabled style="width: 30%"></el-input>
				</el-form-item>
				<el-form-item label="重量(KG)">
					<el-input-number v-model="form.weight" disabled style="width: 30%"></el-input-number>
				</el-form-item>
				<el-form-item label="金额(￥)">
					<el-input-number v-model="form.amount" disabled style="width: 30%"></el-input-number>
				</el-form-item>
				<el-form-item>
					<el-descriptions
							style="padding-top: 10px"
							class="margin-top"
							:column="2"
							border
							v-if="orderDetail.data.startOutlet == currentOutlet && orderDetail.data.status == 0">
						<template #title>
							<span style="margin-right: 20px">揽件快递员信息</span>
							<el-button @click="handleSelectedCourier(0)" type="warning" size="small">变更快递员</el-button>
						</template>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									姓名
								</div>
							</template>
							{{orderDetail.startCourier.name}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									联系方式
								</div>
							</template>
							{{orderDetail.startCourier.phone}}
						</el-descriptions-item>
						<el-descriptions-item :span="2">
							<template #label>
								<div class="cell-item">
									注册时间
								</div>
							</template>
							{{orderDetail.startCourier.createTime}}
						</el-descriptions-item>
					</el-descriptions>
					<el-descriptions
							style="padding-top: 10px"
							class="margin-top"
							:column="2"
							border
							v-if="orderDetail.data.endOutlet == currentOutlet && orderDetail.data.status == 3">
						<template #title>
							<span style="margin-right: 20px">派件快递员信息</span>
							<el-button @click="handleSelectedCourier(1)" type="warning" size="small">变更快递员</el-button>
						</template>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									姓名
								</div>
							</template>
							{{orderDetail.endCourier.name}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									联系方式
								</div>
							</template>
							{{orderDetail.endCourier.phone}}
						</el-descriptions-item>
						<el-descriptions-item :span="2">
							<template #label>
								<div class="cell-item">
									注册时间
								</div>
							</template>
							{{orderDetail.endCourier.createTime}}
						</el-descriptions-item>
					</el-descriptions>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editCourierDialog = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit" :disabled="buttonDisable">确 定</el-button>
				</span>
			</template>
		</el-dialog>

		<!-- 编辑弹出框 -->
		<el-dialog title="编辑" v-model="editDialog" width="40%">
			<el-form label-width="70px" label-position="top">
				<el-form-item label="快递单号">
					<el-input v-model="form.orderNo" disabled style="width: 30%"></el-input>
				</el-form-item>
				<el-form-item label="重量(KG)">
					<el-input-number v-model="form.weight" style="width: 30%"></el-input-number>
				</el-form-item>
				<el-form-item label="金额(￥)">
					<el-input-number v-model="form.amount" style="width: 30%"></el-input-number>
				</el-form-item>
				<el-form-item>
					<el-descriptions
							style="padding-top: 10px"
							class="margin-top"
							:column="3"
							border>
						<template #title>
							<span style="margin-right: 20px">揽件信息</span>
							<el-button @click="handleSelectedOutlet(0)" type="warning" size="small" v-if="orderDetail.data.status == 0">选择网点</el-button>
							<el-button @click="handleSelectedCourier(0)" type="warning" size="small" v-if="orderDetail.data.status == 0">选择快递员</el-button>
						</template>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									名称
								</div>
							</template>
							{{orderDetail.startOutlet.name}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									联系方式
								</div>
							</template>
							{{orderDetail.startOutlet.phone}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									省份
								</div>
							</template>
							{{orderDetail.startOutlet.province}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									城市
								</div>
							</template>
							{{orderDetail.startOutlet.city}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									县区
								</div>
							</template>
							{{orderDetail.startOutlet.town}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									详细地址
								</div>
							</template>
							{{orderDetail.startOutlet.detailAddress}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									揽件快递员
								</div>
							</template>
							{{orderDetail.startCourier.name}}
						</el-descriptions-item>
						<el-descriptions-item :span="2">
							<template #label>
								<div class="cell-item">
									揽件快递员联系方式
								</div>
							</template>
							{{orderDetail.startCourier.phone}}
						</el-descriptions-item>
					</el-descriptions>
				</el-form-item>
				<el-form-item>
					<el-descriptions
							style="padding-top: 10px"
							class="margin-top"
							:column="3"
							border>
						<template #title>
							<span style="margin-right: 20px">派件信息</span>
							<el-button @click="handleSelectedOutlet(1)" type="warning" size="small" v-if="orderDetail.data.status != 4 && orderDetail.data.status != 3">选择网点</el-button>
							<el-button @click="handleSelectedCourier(1)" type="warning" size="small" v-if="orderDetail.data.status != 4 && orderDetail.data.status != 3">选择快递员</el-button>
						</template>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									名称
								</div>
							</template>
							{{orderDetail.endOutlet.name}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									联系方式
								</div>
							</template>
							{{orderDetail.endOutlet.phone}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									省份
								</div>
							</template>
							{{orderDetail.endOutlet.province}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									城市
								</div>
							</template>
							{{orderDetail.endOutlet.city}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									县区
								</div>
							</template>
							{{orderDetail.endOutlet.town}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									详细地址
								</div>
							</template>
							{{orderDetail.endOutlet.detailAddress}}
						</el-descriptions-item>
						<el-descriptions-item>
							<template #label>
								<div class="cell-item">
									派件快递员
								</div>
							</template>
							{{orderDetail.endCourier.name}}
						</el-descriptions-item>
						<el-descriptions-item :span="2">
							<template #label>
								<div class="cell-item">
									派件快递员联系方式
								</div>
							</template>
							{{orderDetail.endCourier.phone}}
						</el-descriptions-item>
					</el-descriptions>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="editDialog = false">取 消</el-button>
					<el-button type="primary" @click="saveEdit" :disabled="buttonDisable">确 定</el-button>
				</span>
			</template>
		</el-dialog>

		<!-- 快递员揽件 -->
		<el-dialog title="请填写揽件信息" v-model="takeDialog" width="40%">
			<el-form label-width="70px" label-position="top">
				<el-form-item label="快递单号">
					<el-input v-model="takeForm.orderNo" disabled style="width: 30%"></el-input>
				</el-form-item>
				<el-form-item label="重量(KG)">
					<el-input-number v-model="takeForm.weight" style="width: 30%"></el-input-number>
				</el-form-item>
				<el-form-item label="金额(￥)">
					<el-input-number v-model="takeForm.amount" style="width: 30%"></el-input-number>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="takeDialog = false">取 消</el-button>
					<el-button type="primary" @click="confirmTake" :disabled="buttonDisable">确 定</el-button>
				</span>
			</template>
		</el-dialog>

		<!-- 快递网点选择器 -->
		<OutletSelector ref="outletDialogRef" @selectedOutlet="selectedOutlet"></OutletSelector>
		<!--用户选择器-->
		<WebUserSelector ref="courierDialogRef" @selectedCourier="selectedCourier"></WebUserSelector>
	</div>
</template>

<script setup lang="ts" name="basetable">
	import {ref, reactive, onMounted, watch} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import { Delete, Edit, Search, Plus,ChatDotRound } from '@element-plus/icons-vue';
	import {getOrderListApi, getOrderDetailApi, updateOrderApi, getReceiveOrderListApi, operateOrderApi, refuseOrderApi, getOrderListByCourierApi, batchOperateOrderApi} from '../api/index';
import OutletSelector from '../components/OutletSelector.vue'
import WebUserSelector from '../components/WebUserSelector.vue'


interface TableItem {
	id: number;
	name: string;
	money: string;
	state: string;
	date: string;
	address: string;
}

const currentUserRole = localStorage.getItem("role");
const currentUserId = localStorage.getItem("userId");
const currentPhone = localStorage.getItem("phone");
const currentOutlet = localStorage.getItem("outletId");
const buttonDisable = ref(false);
const detailDialog = ref(false);
const courierDialog = ref(false);
const outletDialog = ref(false);
const takeDialog = ref(false);
const orderDetail = ref({
	data: {},
	startCourier: {},
	startOutlet: {},
	endCourier: {},
	endOutlet: {}
});
const query = reactive({
	orderNo: '',
	senderPhone: '',
	receiverPhone: '',
	startCourier: '',
	endCourier: '',
	status: '',
	pageNum: 1,
	pageSize: 10,
	total: 0
});
const resetQuery = () => {
	query.orderNo = '';
	query.senderPhone = '';
	query.receiverPhone = '';
	query.status = '';
	query.pageNum =  1;
	query.pageSize = 10;
	query.total = 0;
	query.startCourier = '';
	query.endCourier = '';
	tableData.value = [];
};
const outletQuery = reactive({
	pageNum: 1,
	pageSize: 10,
	page: 1,
	total: 0
});
const courierQuery = reactive({
	pageNum: 1,
	pageSize: 10,
	page: 1,
	total: 0
});
const route = useRoute();

const tableData = ref<TableItem[]>([]);
// 获取表格数据
const getData = async () => {
	const orderResult = await getOrderListApi(query);
	if (orderResult) {
		tableData.value = orderResult.data.content;
		query.total = orderResult.data.count;
	}
};

const getReceiveData = async () => {
	query.receiverPhone = currentPhone;
	if (!query.receiverPhone) {
		ElMessage.warning("请先完善手机号码");
		return ;
	}
	const orderResult = await getReceiveOrderListApi(query);
	if (orderResult) {
		tableData.value = orderResult.data.content;
		query.total = orderResult.data.count;
	}
};

const getCourierOrderData = async () => {
	const orderResult = await getOrderListByCourierApi(query);
	if (orderResult) {
		tableData.value = orderResult.data.content;
		query.total = orderResult.data.count;
	}
};

// 查询操作
const handleSearch = () => {
	query.pageNum = 1;
	initData(route.path);
};
// 分页导航
const handlePageChange = (val: number) => {
	query.pageNum = val;
	initData(route.path);
};

// 快递员揽件
const handleTake = (row: any) => {
	takeForm.id  = row.id;
	takeForm.orderNo  = row.orderNo;
	takeForm.weight  = row.weight;
	takeForm.amount  = row.amount;
	takeDialog.value = true;
};
const takeForm = reactive({
	id: '',
	orderNo: '',
	weight: undefined,
	amount: undefined
});

// 快递员提交揽件信息
const confirmTake = async () => {
	if (!takeForm.weight || takeForm.weight <= 0) {
		ElMessage.warning("请正确填写重量");
		return ;
	}
	if (!takeForm.amount || takeForm.amount <= 0) {
		ElMessage.warning("请正确填写金额");
		return ;
	}
	buttonDisable.value = true;
	const res = await updateOrderApi({
		id: takeForm.id,
		weight: takeForm.weight,
		amount: takeForm.amount,
		status: 1,
	});
	if (res) {
		ElMessage.success("操作成功");
		await initData(route.path);
		takeDialog.value = false;
	}
	buttonDisable.value = false;
};

// 快递员揽件成功
const handleTakeSuccess = async (row: any) => {
	// 二次确认
	ElMessageBox.confirm('确定揽件吗？', '提示', {
		type: 'warning'
	}).then(async () => {
		// 揽件成功
		const res = await operateOrderApi({
			id: row.id,
			status: 1,
		});
		if (res) {
			ElMessage.success("操作成功");
			await initData(route.path);
		}
	}).catch(() => {});
};

// 快递网点发件
const handleSend = async (row: any) => {
	// 二次确认
	ElMessageBox.confirm('确定发件吗？', '提示', {
		type: 'warning'
	}).then(async () => {
		// 发件
		const res = await operateOrderApi({
			id: row.id,
			status: 2,
		});
		if (res) {
			ElMessage.success("操作成功");
			await initData(route.path);
		}
	}).catch(() => {});
};

// 快递网点收件
const handleReceive = async (row: any) => {
	// 二次确认
	ElMessageBox.confirm('确定收件吗？', '提示', {
		type: 'warning'
	}).then(async () => {
		// 收件
		const res = await operateOrderApi({
			id: row.id,
			status: 3,
		});
		if (res) {
			ElMessage.success("操作成功");
			await initData(route.path);
		}
	}).catch(() => {});
};

// 快递员接收
const handleDelivery = async (row: any) => {
	// 二次确认
	ElMessageBox.confirm('确定要接收快件吗？', '提示', {
		type: 'warning'
	}).then(async () => {
		// 接收订单
		const res = await operateOrderApi({
			id: row.id,
			status: 4,
		});
		if (res) {
			ElMessage.success("操作成功");
			await initData(route.path);
		}
	}).catch(() => {});
};

// 用户查验确认
const confirmReceive = (row: any) => {
	// 二次确认
	ElMessageBox.confirm('确定要确认快件吗？', '提示', {
		type: 'warning'
	}).then(async () => {
		// 确认订单
		const res = await operateOrderApi({
			id: row.id,
			status: 5
		});
		if (res) {
			await initData(route.path);
			ElMessage.success('操作成功');
		}
	}).catch(() => {});
};

// 用户拒收
const refuseReceive = (row: any) => {
	// 二次确认
	ElMessageBox.confirm('确定要拒收快件吗？', '提示', {
		type: 'warning'
	}).then(async () => {
		// 拒收订单
		const res = await refuseOrderApi(row.id);
		if (res) {
			await initData(route.path);
			ElMessage.success('操作成功');
		}
	}).catch(() => {});
};

// 用户取消
const handleCancel = (row: any) => {
	// 二次确认
	ElMessageBox.confirm('确定要取消吗？', '提示', {
		type: 'warning'
	}).then(async () => {
		// 取消订单
		const res = await operateOrderApi({
			id: row.id,
			status: 6
		});
		if (res) {
			await initData(route.path);
			ElMessage.success('取消成功');
		}
	}).catch(() => {});
};

// 表格编辑时弹窗和保存
const editDialog = ref(false);
const editCourierDialog = ref(false);
const form = reactive({
	orderNo: '',
	weight: '',
	amount: ''
});
let idx: number = -1;
const clearDetail = () => {
	orderDetail.value.data = {};
	orderDetail.value.startCourier = {};
	orderDetail.value.startOutlet = {};
	orderDetail.value.endCourier = {};
	orderDetail.value.endOutlet = {};
};
const handleEdit = async (index: number, row: any) => {
	clearDetail();
	const detailResult = await getOrderDetailApi({id: row.id});
	if (detailResult) {
		orderDetail.value = detailResult.data;
		// 处理undefined
		if (!orderDetail.value.startOutlet) {
			orderDetail.value.startOutlet = {}
		}
		if (!orderDetail.value.startCourier) {
			orderDetail.value.startCourier = {}
		}
		if (!orderDetail.value.endCourier) {
			orderDetail.value.endCourier = {}
		}
		if (!orderDetail.value.endOutlet) {
			orderDetail.value.endOutlet = {}
		}
		form.orderNo = orderDetail.value.data.orderNo;
		form.amount = orderDetail.value.data.amount;
		form.weight = orderDetail.value.data.weight;
		if (currentUserRole == "2") {
			editCourierDialog.value = true;
		} else if (currentUserRole == '3') {
			editDialog.value = true;
		}
	}
};
const saveEdit = async () => {
	buttonDisable.value = true;
	orderDetail.value.data.weight = form.weight;
	orderDetail.value.data.amount = form.amount;
	if (!orderDetail.value.data.startOutlet || !orderDetail.value.data.startCourier) {
		ElMessage.warning("请选择揽件网点和揽件快递员");
		return ;
	}
	if (!orderDetail.value.data.endOutlet || !orderDetail.value.data.endCourier) {
		ElMessage.warning("请选择派件网点和派件快递员");
		return ;
	}
	const res = await updateOrderApi(orderDetail.value.data);
	if (res) {
		ElMessage.success("修改成功");
		await initData(route.path);
		editDialog.value = false;
		editCourierDialog.value = false;
	}
	buttonDisable.value = false;
};

const handleDetail = async (index: any, row: any) => {
	clearDetail();
	const detailResult = await getOrderDetailApi({id: row.id});
	if (detailResult) {
		orderDetail.value = detailResult.data;
		// 处理undefined
		if (!orderDetail.value.startOutlet) {
			orderDetail.value.startOutlet = {}
		}
		if (!orderDetail.value.startCourier) {
			orderDetail.value.startCourier = {}
		}
		if (!orderDetail.value.endCourier) {
			orderDetail.value.endCourier = {}
		}
		if (!orderDetail.value.endOutlet) {
			orderDetail.value.endOutlet = {}
		}
		detailDialog.value = true;
	}
};



const outletDialogRef = ref();
const outletType = ref();
const handleSelectedOutlet = (param: any) => {
	outletDialogRef.value.changeShow(true);
	outletType.value = param;
};

const selectedOutlet = (param: any) => {
	console.log("selectedOutlet", param);
	if (outletType.value == 0) {
		orderDetail.value.startOutlet = param;
		orderDetail.value.data.startOutlet = param.id;
		orderDetail.value.startCourier = {};
		orderDetail.value.data.startCourier = null;
	} else {
		orderDetail.value.endOutlet = param;
		orderDetail.value.data.endOutlet = param.id;
		orderDetail.value.endCourier = {};
		orderDetail.value.data.endCourier = null;
	}
};


const courierDialogRef = ref();
const courierType = ref();
const handleSelectedCourier = (param: any) => {
	if (param == 0) {
		if (!orderDetail.value.data.startOutlet) {
			ElMessage.warning("请先选择揽件网点");
			return;
		}
		courierDialogRef.value.changeShow(true, orderDetail.value.data.startOutlet);
	} else {
		if (!orderDetail.value.data.endOutlet) {
			ElMessage.warning("请先选择派件网点");
			return;
		}
		courierDialogRef.value.changeShow(true, orderDetail.value.data.endOutlet);
	}
	courierType.value = param;
};

const selectedCourier = (param: any) => {
	console.log("selectedCourier", param);
	if (courierType.value == 0) {
		orderDetail.value.startCourier = param;
		orderDetail.value.data.startCourier = param.id
	} else {
		orderDetail.value.endCourier = param;
		orderDetail.value.data.endCourier = param.id
	}
};

const handleBatchOperate = async (status:number, tip:string) => {
	buttonDisable.value = true;
	// 二次确认
	ElMessageBox.confirm('确定要'+ tip +'吗？', '提示', {
		type: 'warning'
	}).then(async () => {
		// 订单批量操作
		const res = await batchOperateOrderApi(status);
		if (res) {
			await initData(route.path);
			ElMessage.success(tip + '成功，数量为 ' + res.data);
		}
	}).catch(() => {});
	buttonDisable.value = false;
};

const batchDeliveryTag = ref(false);
const initData = async (path: string) => {
	if (path == '/receiveOrder') {
		await getReceiveData();
	} else if (path == '/sendOrder') {
		await getData();
	} else if (path == '/takeOrder') {
		batchDeliveryTag.value = false;
		query.startCourier = currentUserId;
		await getCourierOrderData();
	} else if (path == '/deliveryOrder'){
		batchDeliveryTag.value = true;
		query.endCourier = currentUserId;
		await getCourierOrderData();
	} else {
		await getData();
	}
};
onMounted(async () => {
	resetQuery();
	await initData(route.path);
});

watch(() => route.path,async (newValue,oldValue)=>{
	if (newValue != oldValue) {
		resetQuery();
		await initData(newValue);
	}
});

</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 80px;
}

.handle-input {
	width: 200px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
.el-form-item {
	font-size: 16px;
	font-weight: 700;
	color: var(--el-text-color-primary);
}
.no-show-label-class {
	display: none;
}
</style>
